<template>
  <el-config-provider :locale="appStore.locale" :size="size">
    <AgreementSigningModal v-model="dialogVisible" :activeTab="activeTab" />
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import useSettingsStore from '@/store/modules/settings';
import { handleThemeStyle } from '@/utils/theme';
import useAppStore from '@/store/modules/app';
import { useUserStore } from '@/store/modules/user'

import AgreementSigningModal from './AgreementSigningModal.vue'

const userStore = useUserStore()
const appStore = useAppStore();
const size = computed(() => appStore.size as any);

const dialogVisible = ref(false)
const activeTab = ref(1);
const isReadProt = computed(() => userStore.isReadProt)

// watch(() => userStore.token, (value) => {
//   if (value && isReadProt.value === 0) {
//     nextTick(() => {
//       dialogVisible.value = true
//     })
//   }
// })


watch(() => userStore.curRoleId, (value) => {
  if(value == 6 || value ==7 || value ==8 || value ==9 ){
      if(userStore.userInfo.roleDataRange == 1 ){
        if(userStore.userInfo.isReadProt == 0 ){
          activeTab.value = 1;
          nextTick(() => {
            dialogVisible.value = true
          })
        }else if(userStore.userInfo.isResetPass == 0){
          activeTab.value = 2;
          nextTick(() => {
            dialogVisible.value = true
          })
        }else if(userStore.userInfo.isResetPaypass == 0){
          if(value != 8){
            activeTab.value = 3;
            nextTick(() => {
              dialogVisible.value = true
            })
          }

        }
      }
  }
  // if (value && isReadProt.value === 0) {
  //   nextTick(() => {
  //     dialogVisible.value = true
  //   })
  // }
})

onMounted(() => {
  appStore.getWebDataByDomain(location.origin)
  nextTick(() => {
    // 初始化主题样式
    handleThemeStyle(useSettingsStore().theme);
  });
});
</script>
<style lang="scss">
.p-2 {
  font-size: 13px;
}
a {
  color: #40a9ff;
}
.border_top_0{
  border-top: none !important;
}
.row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .col {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 33%;
    padding: 8px;
    .label {
      color: #000;
    }
    .value {
      flex: 1;
      color: #666;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      a {
        color: #40a9ff;
      }
      img {
        width: 100px;
        height: 100px;
      }
    }
  }
}
.el-table{
  .el-table__cell{
    .cell{
      .el-tag{
        cursor: pointer;
        margin-left: 5px;
        margin-bottom: 5px;
        &:first-child{
          margin-left: 0;
        }
      }
    }
  }
}
</style>
